<template>
	<!-- pc -->
	<view>
		<view class="flex-col">
			<view class="hsc" style="
			        overflow-x: auto;
			        max-width: 90%;
			        margin: 0px auto 10px;
			    ">
				<view class="flex items-center" style="margin-right: 20px;">
					<text v-for="item in SuggestList" @click="(this.input = item), sendmsg('pc')" style="
			                cursor: pointer;
			                font-size: 12px;
			                margin-right: 10px;
			                padding: 5px 10px;
			                border: 1px solid #eee;
			                border-radius: 36px;
			                background: rgba(0,0,0,0.5);
			                white-space: nowrap;
			                box-shadow: 0px 0px 3px #eee;
							color: #ffffff;
			            ">{{ item }}</text>
				</view>
			</view>
			<view class="flex items-center w-full" style="position: relative;margin-bottom:80rpx">
				<view class="flex items-center justify-center" @click="changYuYin" style="  cursor: pointer;
					flex-shrink: 0  ">
				<image style=" width: 68rpx;  height: 68rpx; margin-right: 24rpx;  " src="@/static/yuyin.png" mode="">
					</image>
				</view>
				<input class="w-full" v-model="input" @keydown="sendEnter($event)"
					style="background: linear-gradient( 180deg, #F4F9FF 0%, #D3E7FF 100%);
					border-radius: 22px 22px 22px 22px;
					border: 1px solid #ECEFF3;font-size: 12px;padding: 0 40px 0 20px;
					max-height:68rpx;height: 68rpx;"
					type="text" placeholder="请描述您的问题" />

				<view @click="sendmsg('pc')" class="sendicon"
					style="position: absolute;right: 15px;width: 20px;cursor:pointer;height: 20px;">
				</view>
			</view>
			<!-- <text style="margin: 5px auto 5px;color: #333;font-size: 10px;">中犇教育科技技术支持</text> -->
		</view>
	</view>
</template>

<script>
	import {
		useConversationStore
	} from '../store/index.js'
	import RecorderButton from "@/components/RecorderButton.vue"
	import {
		member_id,
		ProBaseUrl
	} from '../common/config.js';
	const conversationStore = useConversationStore();
	export default {
		name: "sendinput",
		props: {
			DeviceType: {
				type: String
			}

		},
		components: {
			RecorderButton
		},
		data() {
			return {
				input: '',
				messageType: '',
				currentMethod: 'keyboard'
			};

		},
		mounted() {
			console.log('DeviceTypeDeviceTypeDeviceTypeDeviceType', this.DeviceType)
			if (this.DeviceType && this.DeviceType == 'AdvertisingMachine') {
				conversationStore.message_suggestedList = []
			}
			this.$eventBus.$on('sendItem', (e) => {
				console.log('e’',
					e)
				this.input = e.data
				this.messageType = e.type
				// this.currentMethod = 'keyboard'
				this.sendmsg()
			})
			this.getConverstationList()
		},
		beforeDestroy() {
			this.$eventBus.$off('sendMessage')
		},
		computed: {
			SuggestList() {
				console.log(conversationStore.message_suggestedList)
				return conversationStore.message_suggestedList
			}
		},
		methods: {
			changYuYin() {
				this.$emit('changeYuYin')
			},
			sendEnter(e) {

				if (e.code == 'Enter') {
					this.sendmsg()
				}
			},
			pausedSZR() {
				this.$eventBus.$emit('stop')
			},
			getConverstationList() {
				fetch(`${ProBaseUrl}/api/v1/681d77db9d7b3?member_id=${member_id}`).then(res => res.json()).then(
					res1 => console.log('res1', res1))
			},
			postMessageToApp(data) {
				console.log(parent)
				parent.postMessage(data, '*')
			},

			sendmsg(type) {
				if (!this.input || this.input.trim() === '') return
				if (type == 'AM') {
					// this.$eventBus.$emit("hiddenWrap")
				}
				if (this.messageType == 'AM') {
					// this.$eventBus.$emit("hiddenWrap")
				}

				const conversationStore = useConversationStore()
				const id = new Date().getTime()

				console.log('conversationStore.Speaking', conversationStore.Speaking)
				// 如果正在说话，不发送消息
				// if (conversationStore.Speaking) return
				// conversationStore.ChangeSpeaking(true)
				// 发送消息
				conversationStore.sendMessage(this.input, id)

				// H5_SZR_VOICE_MESSAGE
				this.$eventBus.$emit('sendMessage', {
					type: 'H5_SZR_INSTRUCT',
					id,
					detail: {
						code: 3,
						value: this.input
					},
					source: type
				})
				this.input = ''
				this.$eventBus.$emit('scrollBottom')
			}
		}
	}
</script>

<style>
	.bg1 {
		background: url("~@/static/bg1.png") center center / 100% 100% no-repeat;
	}

	.uni-input-placeholder {
		color: #666 !important;
		font-size: 13px !important;
	}

	.sendicon {
		background: url('~@/static/send.png') center center / 100% 100% no-repeat;
	}

	/* .sendicon: {
		background: url('~@/static/sendactive.png') center center / 100% 100% no-repeat;
	} */

	.chatother {
		margin-left: 0 !important;
	}

	.wxsend {
		background: url('~@/static/wxsend.png') center center / 100% 100% no-repeat;
	}

	:deep(.top-edge) {
		display: none !important;
	}
</style>